<template>
  <div class="add-page-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/list' }">{{ moduleName }}管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加{{ moduleName }}</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 表单卡片 -->
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <span>添加{{ moduleName }}</span>
        </div>
      </template>

      <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="120px"
          label-position="right"
          status-icon
      >
        <!-- 示例表单字段 - 根据实际需求修改 -->
        <el-form-item label="名称" prop="name">
          <el-input
              v-model="formData.name"
              placeholder="请输入名称"
              clearable
          />
        </el-form-item>

        <el-form-item label="编码" prop="code">
          <el-input
              v-model="formData.code"
              placeholder="请输入编码"
              clearable
          />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input-number
              v-model="formData.sort"
              :min="0"
              :max="999"
              controls-position="right"
          />
        </el-form-item>

        <el-form-item label="类型" prop="type">
          <el-select
              v-model="formData.type"
              placeholder="请选择类型"
              clearable
          >
            <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="日期" prop="date">
          <el-date-picker
              v-model="formData.date"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
              v-model="formData.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入备注信息"
              maxlength="200"
              show-word-limit
          />
        </el-form-item>

        <el-form-item class="form-actions">
          <el-button type="primary" @click="submitForm" :loading="submitting">
            保存
          </el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

// 模块名称 - 根据实际模块修改
const moduleName = '示例'

// 表单引用
const formRef = ref(null)

// 表单数据
const formData = reactive({
  name: '',
  code: '',
  status: 1,
  sort: 0,
  type: '',
  date: '',
  remark: ''
})

// 表单验证规则
const formRules = reactive({
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入编码', trigger: 'blur' },
    { pattern: /^[A-Za-z0-9_-]+$/, message: '只能包含字母、数字、下划线和横线', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ],
  sort: [
    { type: 'number', message: '排序必须为数字值', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择类型', trigger: 'change' }
  ]
})

// 类型选项 - 根据实际需求修改
const typeOptions = [
  { value: 'type1', label: '类型一' },
  { value: 'type2', label: '类型二' },
  { value: 'type3', label: '类型三' }
]

// 提交状态
const submitting = ref(false)

// 提交表单
const submitForm = () => {
  formRef.value.validate(valid => {
    if (!valid) {
      ElMessage.warning('请完善表单信息')
      return
    }

    submitting.value = true

    // 这里替换为实际的API调用
    setTimeout(() => {
      ElMessage.success('添加成功')
      submitting.value = false
      // 添加成功后跳转到列表页
      router.push('/list')
    }, 1000)
  })
}

// 重置表单
const resetForm = () => {
  formRef.value.resetFields()
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
.add-page-container {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.form-card {
  max-width: 900px;
  margin: 0 auto;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .form-card {
    width: 100%;
  }

  :deep(.el-form-item) {
    margin-bottom: 22px;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }

  :deep(.el-form--label-right .el-form-item__label) {
    text-align: left;
    width: 100% !important;
    margin-bottom: 8px;
  }
}
</style>